<template>
  <div id="zyfl-container" class="zyfl-container">
    <el-row :gutter="20" class="zyfl-row">
      <!-- 侧边目录树（增加侧边栏边框） -->
      <el-col :xs="9" :sm="6" :md="5" :lg="5" :xl="5" class="directory-tree-zsy">
        <div class="directory-tree-wrapper">
          <DirectoryTree @node-click="handleNodeClick" />
        </div>
      </el-col>

      <!-- 资源列表核心区域（增加外层包裹框） -->
      <el-col :xs="15" :sm="18" :md="19" :lg="19" :xl="19">
        <div class="resource-content-wrapper">
          <!-- 资源列表标题栏（增加标题区框线） -->
          <div class="resource-header">
            <h2 class="resource-title">
              {{ currentCatalogName || '全部' }}资源列表
            </h2>
            <div class="resource-count">
              共 {{ pagination.total }} 条资源
            </div>
          </div>

          <!-- 资源列表（强化列表项边框） -->
          <ul v-show="!zyflInfoFlag" class="dataList">
            <li v-for="(item, index) in resourceList" :key="index" class="dataList-item">
              <div class="title" @click="openResourceDetail(item)">
                <i class="el-icon-share" />
                <span class="titleName" :title="item.catalogName">
                  {{ item.catalogName }}
                </span>
              </div>
              <div class="info">
                <div class="info-tag">
                  信息资源分类：{{ item.dataNodes.map(row => row.name).join('，') }}
                </div>
                <div class="infoFlex">
                  <div class="infoItem">
                    <div>信息资源提供方：{{ (item.dataSource && item.dataSource.name) || '-' }}</div>
                    <div>共享类型：{{ formatUpdateCycle(item.sharedType) }}</div>
                  </div>
                  <div class="infoItem">
                    <div>创建时间：{{ item.createTime || '-' }}</div>
                    <div class="ellipsis" :title="item.sharedCondition">共享条件：{{ item.sharedCondition || '无' }}</div>
                  </div>
                  <div class="infoItem">
                    <div>更新周期：{{ formatUpdateCycle(item.updateCycle) }}</div>
                  </div>
                  <div class="infoItem">
                    <div>资源类型：数据资源</div>
                    <div>共享方式：{{ (item.sharedWay || []).map(row => row.sharedName).join(', ') || '-' }}</div>
                  </div>
                </div>
              </div>
            </li>
            <!-- 空状态提示（增加空状态框） -->
            <li v-if="resourceList.length === 0" class="empty-tip">
              <div class="empty-wrapper">
                <el-empty description="暂无资源数据" />
              </div>
            </li>
            <!-- 分页组件（增加分页区框线） -->
            <div v-show="resourceList.length > 0">
              <Pagination :total-num="pagination.total" :current-page="pagination.currentPage" @handleCurrentChange="handleCurrentPageChange" @handlePageSizeChange="handlePageSizeChange" />
            </div>
          </ul>
          <!-- 资源详情弹窗（强化弹窗边框和阴影） -->
          <zyflInfo
            v-if="zyflInfoFlag"
            ref="zyflInfos"
            :zyfl-info-info="currentResource"
            class="zyfl-info-popup"
            @zyflInfoClose="closeResourceDetail"
          />
        </div>
      </el-col>
    </el-row>
  </div>
</template>

<script>
import Pagination from '@/components/common/Pagination.vue'
import DirectoryTree from './DirectoryTree.vue'
import zyflInfo from './zyflInfo'
import { Message } from 'element-ui'
import { getSelectcatalog, getCatalogdetail } from '@/api/zybm'

export default {
  name: 'ResourceClassification',
  components: {
    DirectoryTree,
    zyflInfo,
    Pagination
  },
  data() {
    return {
      zyflInfoFlag: false,
      currentResource: {},
      resourceList: [],
      pagination: {
        currentPage: 1,
        pageSize: 10,
        total: 0
      },
      currentCatalogId: null,
      currentCatalogName: ''
    }
  },
  created() {
    this.getResourceList()
  },
  methods: {
    // 修复共享类型格式（原方法复用，补充case）
    formatUpdateCycle(val) {
      const sharedTypeMap = { 0: '无条件共享', 1: '有条件共享', 2: '不予共享' }
      const cycleMap = { 0: '实时', 1: '每天', 2: '每周', 3: '每月', 4: '每季度', 5: '每半年', 6: '每年', 7: '其他' }
      // 区分共享类型和更新周期（避免格式混淆）
      return sharedTypeMap[val] || cycleMap[val] || '未知'
    },

    handleNodeClick(node) {
      this.currentCatalogId = node.id
      this.currentCatalogName = node.label
      this.pagination.currentPage = 1
      this.getResourceList()
    },

    async getResourceList() {
      try {
        const requestParams = {
          pageNum: this.pagination.currentPage,
          pageSize: this.pagination.pageSize,
          dataNodes: this.currentCatalogId ? [this.currentCatalogId] : []
        }

        const response = await getSelectcatalog(requestParams)
        this.resourceList = response.content || []
        this.pagination.total = response.totalElements || 0
      } catch (error) {
        Message.error('获取资源列表失败，请检查网络或联系管理员')
        console.error('资源列表接口异常：', error)
        this.resourceList = []
        this.pagination.total = 0
      }
    },

    handlePageSizeChange(pageSize) {
      this.pagination.pageSize = pageSize
      this.pagination.currentPage = 1
      this.getResourceList()
    },

    handleCurrentPageChange(currentPage) {
      this.pagination.currentPage = currentPage
      this.getResourceList()
    },

    openResourceDetail(item) {
      getCatalogdetail(item.id).then(res => {
        this.zyflInfoFlag = true
        this.currentResource = res || {}
      }).catch(() => {
        Message.error('获取资源详情失败')
      })
    },

    closeResourceDetail() {
      this.zyflInfoFlag = false
      this.currentResource = {}
    }
  }
}
</script>

<style scoped>
/* 全局容器：增加外层边框，避免内容贴边 */
.zyfl-container {
  width: 100%;
  border-radius: 8px;
  margin-bottom: 20px;
}

/* 行容器：控制菜单最小宽度 */
.directory-tree-zsy {
  min-width: min-content;
}

/* 行容器：增加间距，避免左右内容拥挤 */
.zyfl-row {
  margin-bottom: 16px;
  display: flex;
}

/* 侧边目录树：增加独立边框，强化区域划分 */
.directory-tree-wrapper {
  width: 100%;
  min-height: 600px;
  min-width: 220px;
  /* 固定最小高度，避免边框塌陷 */
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 12px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 资源列表核心区：外层包裹框，强化视觉边界 */
.resource-content-wrapper {
  width: 100%;
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  padding: 20px;
  box-shadow: 0 2px 4px rgba(0, 0, 0, 0.05);
}

/* 资源列表标题栏：增加下边框，区分标题和列表 */
.resource-header {
  display: flex;
  justify-content: space-between;
  align-items: center;
  padding-bottom: 12px;
  border-bottom: 1px solid #f0f0f0;
  margin-bottom: 16px;
}

.resource-title {
  font-size: 18px;
  font-weight: 500;
  color: #333;
  margin: 0;
}

.resource-count {
  font-size: 14px;
  color: #666;
}

/* 资源列表项：强化边框+阴影，解决“缺少框”核心问题 */
.dataList {
  margin: 0;
  padding: 0;
  list-style: none;
}

.dataList-item {
  margin-bottom: 16px;
  padding: 20px;
  /* 增加内边距，避免内容贴边框 */
  background-color: #fff;
  border: 1px solid #e6e6e6;
  border-radius: 6px;
  box-shadow: 0 1px 3px rgba(0, 0, 0, 0.04);
  transition: all 0.3s ease;
  /* 增加 hover 过渡，提升交互感 */
}

/* 列表项 hover 效果：加深边框和阴影，增强交互反馈 */
.dataList-item:hover {
  border-color: #1890ff;
  /*  hover 时变主题色边框 */
  box-shadow: 0 4px 8px rgba(0, 0, 0, 0.08);
}

/* 列表项标题：调整颜色和间距 */
.title {
  display: flex;
  align-items: center;
  margin-bottom: 16px;
  cursor: pointer;
  color: #1890ff;
}

.title i {
  margin-right: 8px;
  font-size: 16px;
}

.titleName {
  font-size: 16px;
  font-weight: 500;
}

/* 列表项信息区：增加内边距，优化文字排版 */
.info {
  color: #666;
  font-size: 14px;
}

.info-tag {
  margin-bottom: 12px;
  padding: 4px 8px;
  background-color: #f5f7fa;
  border-radius: 4px;
  border-left: 3px solid #1890ff;
  /* 增加左侧主题色线，强化标签感 */
}

.infoFlex {
  display: flex;
  flex-wrap: wrap;
  gap: 24px;
  /* 增加间距，避免信息拥挤 */
}

.infoItem {
  flex: 1;
  min-width: 180px;
  /* 缩小最小宽度，适配小屏幕 */
  line-height: 24px;
  /* 增加行高，提升可读性 */
}

/* 空状态：增加边框包裹，避免“无框”感 */
.empty-tip {
  padding: 60px 0;
  text-align: center;
  border: 1px dashed #e6e6e6;
  /* 虚线边框，区分空状态和正常列表 */
  border-radius: 6px;
  background-color: #fafafa;
}

/* 详情弹窗：强化边框和阴影（穿透组件样式） */
::v-deep .zyfl-info-popup {
  border: 1px solid #e6e6e6 !important;
  border-radius: 8px !important;
  box-shadow: 0 4px 16px rgba(0, 0, 0, 0.1) !important;
}

/* 适配小屏幕：避免边框变形 */
@media (max-width: 768px) {
  .zyfl-container {
    padding: 8px;
  }

  .directory-tree-wrapper {
    min-height: 300px;
    margin-bottom: 16px;
  }

  .resource-content-wrapper {
    padding: 12px;
  }

  .infoFlex {
    gap: 12px;
  }

  .infoItem {
    min-width: 100%;
    /* 小屏幕下独占一行，避免边框挤压 */
  }
}
</style>
